<template>
  <button
    @click="toggleCompare"
    :disabled="isAdding"
    class="inline-flex items-center justify-center px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 border-2"
    :class="isInCompare 
      ? 'bg-gray-900 text-white border-gray-900 hover:bg-gray-800 hover:border-gray-800' 
      : 'bg-white text-gray-900 border-gray-200 hover:border-gray-400'"
  >
    <svg 
      v-if="!isAdding"
      class="w-5 h-5 mr-2" 
      fill="none" 
      stroke="currentColor" 
      viewBox="0 0 24 24"
      stroke-width="2"
    >
      <path 
        v-if="isInCompare"
        stroke-linecap="round" 
        stroke-linejoin="round" 
        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" 
      />
      <path 
        v-else
        stroke-linecap="round" 
        stroke-linejoin="round" 
        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" 
      />
    </svg>
    <svg 
      v-else
      class="animate-spin w-5 h-5 mr-2" 
      fill="none" 
      viewBox="0 0 24 24"
    >
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    {{ isInCompare ? '已加入对比' : '加入对比' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'
import { useNotification } from '@/composables/useNotification'

const props = defineProps({
  productId: {
    type: Number,
    required: true
  },
  initialIsInCompare: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:compareCount'])

const { showSuccess, showError } = useNotification()
const isInCompare = ref(props.initialIsInCompare)
const isAdding = ref(false)

const toggleCompare = async () => {
  if (isAdding.value) return
  
  isAdding.value = true
  
  try {
    if (isInCompare.value) {
      // 移除对比
      const response = await fetch(`/api/compare/remove/${props.productId}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
      })
      
      const data = await response.json()
      
      if (response.ok) {
        isInCompare.value = false
        showSuccess(data.message || '已移除对比')
        emit('update:compareCount', data.count)
      } else {
        showError(data.message || '移除失败')
      }
    } else {
      // 添加对比
      const response = await fetch('/api/compare/add', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ product_id: props.productId })
      })
      
      const data = await response.json()
      
      if (response.ok) {
        isInCompare.value = true
        showSuccess(data.message || '已添加对比')
        emit('update:compareCount', data.count)
      } else {
        showError(data.message || '添加失败')
      }
    }
  } catch (error) {
    console.error('对比操作失败:', error)
    showError('操作失败，请重试')
  } finally {
    isAdding.value = false
  }
}
</script>

